<template>
  <div
    class="echart-box"
    :id="id"
    :style="{height:height,width:width}"
  ></div>
</template>
<script>
import echarts from "echarts";
import resize from "./resize.js";
export default {
  mixins: [resize],
  data: () => {
    return {
      chart: null,
      chartsData: {
        titleList: [],
        defectDetectionList: [],
        testCoverageList: [],
      },
    };
  },
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    dataList: {
      type: Array,
      require: true,
    },
    id: {
      type: String,
      require: true,
    },
    dataset: {
      type: Object,
      default: () => {
        return {};
      },
    },
    title: {
      type: String,
      require: true,
    },
  },
  mounted() {
    this.initData(this.dataList);
    let _this = this;
    this.$nextTick(() => {
      _this.initChart(_this.chartsData);
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initData(dataList) {   //获取数据，整理数据格式，填入charts
      if (dataList.length > 0) {
        this.chartsData.titleList = dataList.map((item) => item.objectName);
        this.chartsData.defectDetectionList = dataList.map(
          (item) => item.defectDetection
        );
        this.chartsData.testCoverageList = dataList.map(
          (item) => item.testCoverage
        );
      }
    },
    initChart(data) {
      let dom = document.getElementById(this.id);
      this.chart = echarts.init(dom);
      this.chart.setOption({
        backgroundColor: "#fff",
        title: {
          text: `首轮测试--当前测试对象名称：${data.titleList[0]}`,
        },
        tooltip: {
          trigger: "axis",

          axisPointer: {
            type: "shadow",
            shadowStyle:{
                color:'#aad5ff33'
            }
          },
          formatter: function (params) {
                let str=params[0].name
                params.forEach((item,index)=>{   //提示框中显示百分比
                    str=str+'<br/>'+ item.marker + item.seriesName + ' : ' + (item.value)+'%'
                })
                return str
            }
        },
        legend: {
          left: "center",
          bottom: "bottom",
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "15%",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          name: "测试对象",
          nameGap: 2,
          type: "category",
          data: data.titleList,
          axisLabel: {
            textStyle: {
              color: function (value, index) {
                return index == 0 ? "rgba(58,161,255,1)" : "#90979c";
              },
              fontWeight: function (value, index) {
                return index == 0 ? "bold" : "normal";
              },
            },
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}%",
            color:'#9197c4'
          },
        },
        series: [
          {
            name: "缺陷测试率",
            data: data.defectDetectionList,
            type: "bar",
            barGap: 0,
            barCategoryGap: "40%",
            itemStyle: {
              color: "rgba(23,238,203, 1)",
            },
          },
          {
            name: "测试覆盖率",
            data: data.testCoverageList,
            type: "bar",
            itemStyle: {
              color: "rgba(58,161,255,1)",
            },
          },
        ],
      });
      this.chart.hideLoading();
    },
    resetChart(width, height) {
      if (this.chart) {
        this.chart.hideLoading();
        this.chart.setOption({
          legend: this.dataset.legend,
          xAxis: this.dataset.xAxis,
          series: this.dataset.series,
        });
        this.chartResize(width, height);
      }
    },
    chartResize(width, height) {
      this.chart.getDom().style.width = `${width}px`;
      this.chart.getDom().style.height = `${height}px`;
      this.chart.resize();
    },
  },
  watch: {},
};
</script>
<style lang="scss">
</style>